<template>
  <el-container class="container">
    <el-header class="header">
      <span>群信息</span>
    </el-header>
    <el-main class="main lum-scrollbar">
      <!-- 开发成一个选项卡模式 -->

      <!-- 选项卡 -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
        text-color="#fff"
        @select="handleSelect"
        style="position:sticky;top:0;left:0;z-index: 999"
      >
        <el-menu-item index="1">交易订单</el-menu-item>
        <!-- <el-menu-item index="2">交易订单</el-menu-item> -->
        <el-menu-item index="2">商品信息</el-menu-item>
      </el-menu>
   
      <!-- 先整客户消息 -->

      <div v-if="activeIndex === '1'">
        <!-- 客户信息 -->

        <div class="user_box">
          <el-card class="box-card">
            <el-avatar :size="80" :src="memberVip.avatar"></el-avatar>
            <div class="box-card-bottom">
              <div class="p1">{{ memberVip.nickname }}</div>
              <!-- <div class="p2">会员等级:高级</div> -->
            </div>
          </el-card>
        </div>
        <div class="order-header">
            <div class="order-header-title">用户订单</div>
            <el-select v-model="status" placeholder="订单状态" size="small" style="width:100px" clearable @change="orderStatusChange">
                <el-option
                    v-for="item in filterList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </div>
        <!-- 用户订单 -->
        <div class="user-order" :style="{background: orderList.length < 1 ? 'var(--next-color-white)' : ''}">
            <el-scrollbar v-if="orderList.length > 0">
                <div style="position:relative" class="order-cell" v-for="item in orderList" :key="item.id" @click="handleOrderDetail(item)">
                    <div class="top-status">
                        <p class="time">下单时间: {{ item.createTime }}</p>
                        <p class="status red">{{ getStatusText(item.status) }}</p>
                    </div>
                    <div class="goods-data" v-for="goods in item.orderItemList" :key="goods.id">
                        <el-image :src="goods.skuPic" fit="cover" style="width:70px;height:70px;"></el-image>
                        <div class="order-data">
                            <p class="order-title b_row">{{ goods.skuName }}</p>
                            <p class="price"><span class="unit">￥</span>{{ goods.skuPrice }}</p>
                        </div> 
                    </div>
                    <el-button style="position: absolute;bottom: 6px;right: 5px;" @click="submitSendMesageOrder(item)" type="primary" size="small"
                  >发送</el-button>
                </div>
            </el-scrollbar>
            <el-empty v-else description="暂无订单" />
            
        </div>
        <div class="loadingMore">
          <el-button v-if="showBtn_order" @click="moreClickOrder">加载更多</el-button>
        </div>
      </div>

      <!-- 客户消息整完了 -->

      <!-- 用户浏览记录再这里 -->
      <div v-if="activeIndex === '2'" style="margin-top:20px;padding: 0 10px 0 10px;">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in shopDataList" :key="index" :span="12">
            <div class="shop_box">
              <div class="imge">
                <img :src="item.skuDefaultImg" alt="" />
              </div>
              <div class="price">
                <s style="font-size: 12px; color: #666; margin-right: 10px"
                  >原价 ￥{{ item.price }}</s
                >
                <strong> <em>Vip</em>￥{{ item.vipPrice }} </strong>
              </div>
              <div class="title">
                {{ item.skuTitle }}
              </div>
              <div class="send_shop">
                <el-button @click="submitSendMesage(item)" type="primary" size="small"
                  >发送商品</el-button
                >
              </div>
            </div>
          </el-col>
          <el-col :span="12"> </el-col>
        </el-row>
        <div class="loadingMore">
          <el-button v-if="showBtn" @click="moreClick">加载更多</el-button>
        </div>
      </div>

      <!--用户浏览记录结束  -->
      <!-- 隐藏掉 -->

      <div v-if="activeIndex === '4'">
        <!-- 客户的资料写在这里 -->
        <div class="user_info"></div>
        <div class="list-item flex">
          <p>
            <span>群名称：</span>
            <span class="group-setting-title">{{ detail.groupName }}</span>
          </p>
        </div>

        <div class="list-item">
          <span>群名片：</span>
          <span v-if="!isEditRemark" class="edit-visit-card">
            <span>
              {{ detail.visitCard }}
              <span v-show="!detail.visitCard" style="font-size: 12px"> 添加群名片 </span>
            </span>
            <el-icon
              v-if="detail.is_dismiss != 1"
              @click="openEditRemark"
              class="edit-remark-icon"
              ><ele-Edit
            /></el-icon>
          </span>
          <span v-else>
            <input
              v-model.trim="editRemarkText"
              class="edit-input"
              type="text"
              v-focus
              @keyup.enter="editRemark"
            />
            <span class="input-submit" @click="editRemark">确认</span>
          </span>
        </div>

        <!-- <div class="list-item flex">
        <span>消息免打扰：</span>
        <el-switch
          v-model="detail.is_disturb"
          inactive-color="#e0d6d6"
          :disabled="disturbDisabled"
          @change="editDisturb"
        />
      </div> -->

        <!-- 预留 -->
        <!-- <div class="list-item flex">
        <span>全员禁言：</span>
        <el-switch v-model="detail.no_message" inactive-color="#e0d6d6" />
      </div> -->

        <div class="list-item">
          <span>群成员：</span>
          <span>{{ members.length }} 人</span>
        </div>

        <div class="list-item-tips">群主已开启“新成员入群可查看所有聊天记录”</div>

        <div class="list-item">群简介</div>

        <div class="list-item-tips">
          {{ detail.profile ? detail.profile : "暂无群简介" }}
        </div>

        <!-- <div class="list-item flex">
        <span>群公告</span>
        <span
          v-show="detail.group_notice"
          class="more"
          @click="isShowGroupNotice = true"
          >更多
        </span>
      </div>

      <div class="list-item-tips group-notice">
        <span v-if="detail.group_notice.title">
          <b>#{{ detail.group_notice.title }}#</b><br />
          {{ detail.group_notice.content }}
        </span>
        <span v-else>暂无群公告</span>
      </div> -->

        <div class="list-item">
          <div class="member-box">
            <div class="view-box">
              <el-input
                :prefix-icon="Search"
                type="text"
                placeholder="搜索群成员"
                v-model="keywords"
              ></el-input>
              <el-button
                v-if="detail.is_dismiss != 1"
                @click="addGroupMembers"
                size="default"
                :icon="Plus"
                circle
              />
            </div>

            <el-row class="row-header">
              <el-col :span="20">昵称</el-col>
              <el-col :span="4">名片</el-col>
            </el-row>

            <template v-if="searchs.length == 0">
              <el-row class="row-items">
                <el-col :span="24">
                  <p style="text-align: center">无数据</p>
                </el-col>
              </el-row>
            </template>
            <template v-else>
              <el-row
                v-for="member in searchs"
                :key="member.user_id"
                class="row-items"
                @click.prevent="openUserDetail(member.userId)"
              >
                <el-col :span="20" class="row-col">
                  <el-avatar :size="20" :src="member.avatar">
                    <el-image
                      :src="detaultAvatar"
                      style="width: 20px; height: 20px"
                    ></el-image>
                  </el-avatar>
                  <span class="nickname">{{ member.nickname }}</span>
                  <label class="badge master" v-if="member.leader == 2">群主</label>
                </el-col>
                <el-col :span="4">
                  <span>{{ member.user_card ? member.user_card : "-" }}</span>
                </el-col>
              </el-row>
            </template>
          </div>
        </div>
      </div>
    </el-main>

    <el-footer class="footer" v-if="detail.is_dismiss != 1">
      <el-button type="primary" v-if="detail.is_manager" @click="isShowManager = true"
        >群组管理</el-button
      >
      <el-button type="danger" plain v-else @click="signout">退出群组</el-button>
    </el-footer>

    <!-- 退群提示层 -->
    <div class="signout-box no-select" v-show="isShowSignout">
      <p v-show="signoutStatus == 0">您确认退出当前群聊吗？</p>
      <p v-show="signoutStatus == 0">退群后群聊信息将不能查看</p>
      <p v-show="signoutStatus == 0" class="signout-btn">
        <button @click="signout">确认</button>
        <button @click="isShowSignout = false">取消</button>
      </p>

      <p v-show="signoutStatus == 1" class="signout-btn mt38">
        <span style="color: #ccc">
          <el-icon class="is-loading"><ele-Loading /></el-icon>
          正在退出群聊...
        </span>
      </p>

      <p v-show="signoutStatus == 2" class="signout-btn mt38">
        <span style="color: #cccccc">退出群聊失败，请3(s)后再试...</span>
      </p>

      <p v-show="signoutStatus == 3" class="signout-btn mt38">
        <span style="color: #339e19">
          <el-icon><ele-SuccessFilled /></el-icon> 已成功退出群聊...
        </span>
      </p>
    </div>

    <!-- 邀请好友组件 -->
    <transition name="el-fade-in-linear">
      <GroupLaunch
        v-if="inviteFriendBox"
        :group-id="groupId"
        @close="inviteFriendBox = false"
        @invite-success="inviteSuccess"
      />
    </transition>

    <!-- 群管理组件 -->
    <transition name="el-fade-in-linear">
      <GroupManage v-if="isShowManager" :group-id="groupId" @close="closeManage" />
    </transition>

    <!-- 群公告组件 -->
    <transition name="el-fade-in-linear">
      <GroupNotice
        v-if="isShowGroupNotice"
        :group-id="groupId"
        @close="isShowGroupNotice = false"
      />
    </transition>
    <user-card-detail v-model:show="showUserDetail" :user_id="user_id"></user-card-detail>
  </el-container>
</template>

<script>
import { reactive, toRefs, watch, onMounted, computed, ref } from "vue";
import { useChatApi } from "/@/api/chat/index";
import { ElNotification, ElMessageBox } from "element-plus";

// 创建群聊组件
import GroupLaunch from "/@/views/chat/components/group/GroupLaunch.vue";
import GroupManage from "/@/views/chat/components/group/GroupManage.vue";
import GroupNotice from "/@/views/chat/components/group/GroupNotice.vue";
import detaultAvatar from "/@/assets/detault-avatar.jpg";
import { useOrderApi } from '/@/api/order/index'
import { Search, Plus } from "@element-plus/icons-vue";
import { orderModelStatus } from '/@/stores/order'
export default {
  name: "GroupPanel",
  components: {
    GroupLaunch,
    GroupManage,
    GroupNotice,
  },
  props: {
    params: {
            type: Object,
            default() {
                return {
                    talk_source: 0,  // 消息类型 (1: 17聊 2: 商城咨询客服)
                }
            }
        },
    groupId: {
      type: [String, Number],
      default: null,
    },
  },
  setup(props, context) {
    const { groupId ,params} = toRefs(props);
    const chatApi = useChatApi();
    const activeIndex = ref("1");
    const orderApi = useOrderApi()
    const storeOrder = orderModelStatus() // 订单各类状态数据
    const state = reactive({
      detail: {
        groupAvatar: "",
        groupId: 0,
        groupName: "",
        groupOwner: "",
        profile: "",
        is_disturb: 0,
        no_message: false,
        visitCard: "",
        is_manager: false,
        group_notice: [],
        is_dismiss: 0,
        lookPage: 0,
      },
      keywords: "",
      members: [],
      isEditRemark: false,
      editRemarkText: "",
      inviteFriendBox: false,
      isShowSignout: false,
      signoutStatus: 0,
      disturbDisabled: false,
      // 是否显示群管理窗口
      isShowManager: false,
      // 是否显示群公告窗口
      isShowGroupNotice: false,
      showUserDetail: false,
      user_id: null,
      memberVip: {},
      shopDataList: [],
      showBtn: true,
      btnStatus:0,
      status: 0,
      filterList: storeOrder.status,
      orderList: [],
      leaderUserId: null,
      orderpage:0,
      showBtn_order:true
    });
    const searchs = computed(() => {
      return state.keywords == ""
        ? state.members
        : state.members.filter((item) => {
            return (
              item.nickname.match(state.keywords) != null ||
              item.user_card.match(state.keywords) != null
            );
          });
    });
    // 加载群组成员列表
    const loadMembers = () => {
      chatApi
        .ServeGetGroupMembers({
          group_id: groupId.value,
        })
        .then((res) => {
          if (res.code == 0) {
            state.members = res.data.sort((a, b) => {
              return b.leader - a.leader;
            });
            const leader = state.members.find(item => {
              if(item.leader == 2){
                return item
              }
                   
                  })
            state.leaderUserId = leader.userId
            state.memberVip = leader;
            context.emit("group-info", {
              group_id: state.members.groupId,
              members_num: state.members.length,
            });
            state.orderpage = 0
            loadOrder();
          }
        });
    };
    // 加载群信息
    const loadGroupDetail = () => {
      state.isEditRemark = false;
      chatApi
        .ServeGroupDetail({
          group_id: groupId.value,
        })
        .then((res) => {
          if (res.code == 0) {
            let result = res.data;
            state.detail.groupAvatar = result.avatar;
            state.detail.groupId = result.group_id;
            state.detail.userId = res.data.user_id;
            state.detail.groupName = result.group_name;
            state.detail.groupOwner = result.manager_nickname;
            state.detail.profile = result.profile;
            state.detail.is_disturb = result.is_disturb == 1;
            state.detail.visitCard = result.visit_card;
            state.detail.is_manager = result.is_manager;
            state.detail.is_dismiss = result.is_dismiss;
            if (result.notice) {
              state.detail.group_notice = result.notice;
            }
          }
        });
    };
    // size: 10,// 页容
    // current: 1,// 当前页
    // memberId

    // 获取当前所谓的商品浏览列表
    const look = () => {
      state.lookPage = state.lookPage + 1;
      chatApi
        .SpoorpageList({
          size: 20,
          current: state.lookPage,
          memberId: state.memberVip.userId,
          type: 0,
        })
        .then((res) => {
          if (res.code == 0) {
            if (state.shopDataList.length === 0) {
              state.shopDataList = res.data.records;
            } else {
              state.shopDataList = state.shopDataList.concat(res.data.records);
            }
            if (res.data.records.length < 20) {
              state.showBtn = false;
            }
          }
        });
    };
    // 查看用户信息
    const openUserDetail = (user_id) => {
      // 启用一个组件框, 即user框数据
      state.user_id = user_id;
      state.showUserDetail = true;
    };
    // 邀请好友加入群聊
    const addGroupMembers = () => {
      sessionStorage.setItem("invite_group_id", state.detail.groupId);
      state.inviteFriendBox = true;
    };
    // 邀请好友成功之后的回调事件
    const inviteSuccess = () => {
      state.inviteFriendBox = false;
      loadMembers();
      ElNotification({
        title: "邀请成功",
        message: `好友已成功加入群组...`,
        type: "success",
      });
    };
    // 发送群聊
    const sendGroup = () => {
      context.emit("send-group", state.detail.groupId);
    };
    // 退出群操操作
    const signout = () => {
      state.signoutStatus = 1;
      chatApi
        .ServeSecedeGroup({
          group_id: state.detail.groupId,
        })
        .then((res) => {
          if (res.code == 0) {
            state.signoutStatus = 3;
            setTimeout(() => {
              state.signoutStatus = 0;
              state.isShowSignout = false;
              context.emit("quit-group");
            }, 1500);
          } else {
            state.signoutStatus = 2;
            setTimeout(() => {
              state.signoutStatus = 0;
            }, 3000);
          }
        })
        .catch(() => {
          state.signoutStatus = 2;
          setTimeout(() => {
            state.signoutStatus = 0;
          }, 3000);
        });
    };
    // 解散群组
    const dismiss = () => {
      ElMessageBox.confirm(`你确定要解散当前群组吗？此操作是不可恢复的！`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
        dangerouslyUseHTMLString: true,
      }).then(() => {});
    };
    // 打开编辑用户群名片
    const openEditRemark = () => {
      state.isEditRemark = true;
      state.editRemarkText = state.detail.visitCard;
    };
    // 设置用户群名片
    const editRemark = () => {
      if (state.editRemarkText == "") {
        state.isEditRemark = false;
        return;
      }
      if (state.detail.visitCard == state.editRemarkText) {
        state.isEditRemark = false;
        return;
      }
      chatApi
        .ServeUpdateGroupCard({
          group_id: parseInt(groupId.value),
          visit_card: state.editRemarkText,
        })
        .then(() => {
          state.isEditRemark = false;
          state.detail.visitCard = state.editRemarkText;
        });
    };
    const close = () => {
      context.emit("close");
    };
    // 群组管理关闭
    const closeManage = () => {
      state.isShowManager = false;
      loadGroupDetail();
      loadMembers();
    };
    watch(
      () => groupId.value,
      (val) => {
        if (val > 0) {
          loadGroupDetail();
          loadMembers();
        }
      }
    );
    const moreClick = () => {
      // state.lookPage =  state.lookPage + 1
      look();
    };
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath);
      activeIndex.value = key;
      state.lookPage = 0;
      if (activeIndex.value === "2") {
        state.shopDataList = []
        look();
      }
    };
    const submitSendMesage = (content) => {
      if(state.btnStatus===0){
        state.btnStatus = 1;
        let order = {
        skuInfos: {
          skuId: content.targetSite,
          skuTitle: content.skuName,
          skuImage: content.skuDefaultImg,
          price: content.price,
          vipPrice: content.vipPrice,
        },
      };
      chatApi
        .skuInfo({
          skuInfo: order.skuInfos,
          receiver_id: parseInt(params.value.receiver_id),
          talk_type: parseInt(params.value.talk_type),
          talkSource: params.value.talk_source,
        })
        .then(() => {
          state.btnStatus = 0
          // context.emit("close");
          // chatTalk.UPDATE_TALK_ITEM({
          //     index_name: index_name.value,
          //     draft_text: '',
          // })
        });
      }
    
    };
    const submitSendMesageOrder= (content) => {
      if(state.btnStatus===0){
        state.btnStatus = 1;
        var orderId = null;
				var orderSn = null
				let orderChildren = content.orderItemList.map((item,index)=>{
					orderId = item.orderId
					orderSn = item.orderSn
					return {
						skuId:item.spuId,
						skuTitle:item.spuName,
						skuImage:item.spuPic,
						skuPrice:item.skuPrice,
						skuVipPrice:item.skuPrice,
					}
				})
        
				let order ={
					skuInfos:orderChildren,
					userName:content.receiverName,
					mobilePhone:content.receiverPhone,
					address:content.receiverDetailAddress,
					orderId:orderId,
					orderSn:orderSn,
					orderPrice:content.payAmount,
					orderCreateTime:content.createTime,
          orderStatus:content.status
				}
        console.log(order)

        chatApi
        .orderText({
          orderInfo:order,
					msgType:11,
          receiver_id: parseInt(params.value.receiver_id),
          talk_type: parseInt(params.value.talk_type),
          talkSource: params.value.talk_source,
        })
        .then(() => {
          state.btnStatus = 0
          // context.emit("close");
          // chatTalk.UPDATE_TALK_ITEM({
          //     index_name: index_name.value,
          //     draft_text: '',
          // })
        });
      }
    
    };
            // 加载订单
            const loadOrder = () => {
            if(!state.leaderUserId) return
            state.orderpage = state.orderpage + 1
            orderApi.getList({
                pageNum: state.orderpage,
                pageSize: 10,
                memberId: state.leaderUserId,
                status: state.status===0?"":(state.status-1)+""
            }).then(res => {
                const list = res.data.list.records
                if(state.orderList.length===0){
                  state.orderList = list
                }else{
                  state.orderList = state.orderList.concat(list) 
                }
                state.total = res.data.list.total;

                if(list.length<10){
                  state.showBtn_order = false
                }
            })
        }
                // 获取订单状态
                const getStatusText = computed(() => {
            return (val) => {
                const result = state.filterList.find(item => {
                    return item.id == String(val)
                })
                return result ? result.name : ''
            }
        })
           // 查看订单详情
           const handleOrderDetail = (item) => {
            state.rowForm = item
            state.showOrderDetail = true
        }
        // 订单状态切换
        const orderStatusChange = (e) => {
           
              state.status = e
           
           
            state.orderpage = 0
            loadOrder()
        }
        const moreClickOrder = () => {
          loadOrder()
        }
    onMounted(() => {
      if (parseInt(groupId.value) > 0) {
        loadGroupDetail();
        state.status = 0
        loadMembers();
      }
      
    });
    return {
      ...toRefs(state),
      loadMembers,
      loadGroupDetail,
      searchs,
      openUserDetail,
      addGroupMembers,
      inviteSuccess,
      sendGroup,
      signout,
      dismiss,
      editRemark,
      detaultAvatar,
      close,
      Search,
      Plus,
      openEditRemark,
      closeManage,
      activeIndex,
      handleSelect,
      moreClick,
      submitSendMesage,
      orderStatusChange,
      handleOrderDetail,
      getStatusText,
      submitSendMesageOrder,
      moreClickOrder
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  overflow: hidden;
  .header {
    height: 60px;
    line-height: 60px;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid #f5eeee;
    position: relative;

    span {
      font-size: 16px;
      font-weight: 400;
    }

    .icon-send {
      position: absolute;
      left: 15px;
      top: 22px;
      font-size: 18px;
      cursor: pointer;
    }

    .el-icon-close {
      position: absolute;
      right: 15px;
      top: 22px;
      font-size: 18px;
      cursor: pointer;
    }
  }

  .main {
    padding: 0;
  }
}

.list-item {
  position: relative;
  padding: 16px 16px 0;
  min-height: 18px;
  font-size: 14px;

  &.flex {
    display: flex;
    justify-content: space-between;
  }

  .edit-visit-card {
    position: initial;
    color: #a29f9f;
  }

  .edit-remark-icon {
    margin-left: 5px;
    color: rgb(169, 184, 187);
    position: absolute;
    top: 20px;
    cursor: pointer;
  }

  .edit-input {
    width: 46%;
    height: 25px;
    line-height: 25px;
    border: 1px solid var(--el-color-primary-light-4);
    padding-left: 5px;
    border-radius: 3px;
  }

  .input-submit {
    width: 55px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    background-color: var(--el-color-primary-dark-2);
    border-radius: 2px;
    display: inline-block;
    color: #fff !important;
    font-size: 12px;
    margin-left: 10px;
    cursor: pointer;
  }

  .group-setting-title {
    max-width: 250px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .group-boss-name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 180px;
    position: relative;
    top: 4px;
  }

  .group-invite {
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #877272;
    cursor: pointer;
    border-radius: 2px;
    border: 1px dashed #d9bbbb;
    font-size: 13px;
    transition: all 0.5s ease-in-out;
    &:hover {
      color: #ff5722;
      border-color: #ff5722;
      transform: scale(1.01);
    }
  }

  .more {
    color: var(--el-color-primary);
    cursor: pointer;
    font-size: 12px;
  }
}

.list-item-tips {
  font-size: 12px;
  color: #b1b1b1;
  margin-top: 5px;
  padding-left: 16px;
  padding-right: 16px;
  font-weight: 300;
  overflow: hidden;
  word-break: break-word;
}

.group-notice {
  line-height: 22px;
}

.member-box {
  min-height: 180px;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ecebeb;
  border-radius: 10px;

  .view-box {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    align-items: center;
    :deep(.el-input) {
      margin-right: 10px;
      .el-input__wrapper {
        box-shadow: var(--el-border-color) 0px 0px 0px 1px;
      }
    }
    input {
      width: calc(100% - 40px);
      height: 30px;
      line-height: 28px;
      border-radius: 3px;
      border: 1px solid #f1e9e9;
      color: #b3b0b0;
      font-size: 13px;
      padding: 0 10px 0 30px;

      &::-webkit-input-placeholder {
        color: #ccc9c9;
        font-size: 13px;
      }
    }

    .i-sousuo {
      color: rgb(179, 176, 176);
      position: absolute;
      left: 10px;
      top: 9px;
    }

    span {
      position: relative;

      i {
        font-size: 24px;
        top: -3px;
        left: 10px;
        position: absolute;
        color: #ccc;
      }
    }
  }

  .row-header {
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0dddd;

    div {
      height: 30px;
      line-height: 30px;

      &:nth-child(2) {
        text-align: center;
      }

      &:nth-child(3) {
        text-align: right;
      }
    }
  }

  .row-items {
    width: 100%;
    height: 30px;
    margin-bottom: 3px;
    font-size: 12px;
    cursor: pointer;
    .row-col {
      display: flex;
      align-items: center;
      .badge {
        background-color: #ffe699;
        color: red;
        font-size: 12px;
        font-weight: 400;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border-radius: 2px;
        cursor: default;
        user-select: none;
        line-height: 18px;
        margin-left: 5px;
        transform-origin: left;
        flex-shrink: 0;
        transform: scale(0.88);
      }
    }
    &:hover {
      background: #f6f6f6;
    }

    div {
      height: 30px;
      line-height: 30px;

      &:nth-child(2) {
        text-align: center;
      }

      &:nth-child(3) {
        text-align: right;
      }
    }

    img {
      display: inline-block;
      border-radius: 50%;
      position: relative;
      top: 4px;
    }

    .nickname {
      margin-left: 5px;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}

.signout-box {
  width: 100%;
  height: 100px;
  background: #ffffff;
  position: absolute;
  z-index: 2;
  bottom: 0;
  box-shadow: -1px -3px 11px 0px #cccccc82;
  -webkit-animation: showFooter 0.35s ease-in-out;
  -moz-animation: showFooter 0.35s ease-in-out;
  animation: showFooter 0.35s ease-in-out;

  p {
    &:first-child {
      text-align: center;
      height: 35px;
      line-height: 35px;
    }

    &:nth-child(2) {
      text-align: center;
      font-size: 12px;
      color: #cccccc;
    }
  }

  .mt38 {
    margin-top: 38px;
  }
}

.signout-btn {
  text-align: center;
  margin-top: 10px;

  button {
    height: 30px;
    width: 90px;
    line-height: 30px;
    background: var(--el-color-primary-dark-2);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;

    &:first-child {
      background: #ff3333;
      color: white;
    }

    &:last-child {
      background: #f1eded;
    }
  }
}

.container .footer {
  height: 60px;
  padding: 0;
  line-height: 60px;
  text-align: center;
  border-top: 1px solid #f5eeee;
  button {
    width: 180px;
    height: 35px;
    line-height: 35px;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    margin: auto auto;
  }
}

@keyframes showFooter {
  0% {
    transform: translateY(75px);
  }

  to {
    transform: translateY(0);
  }
}

@-webkit-keyframes showFooter {
  0% {
    -webkit-transform: translateY(75px);
  }

  to {
    -webkit-transform: translateY(0);
  }
}
.el-menu-item,
.is-active {
  background-color: #fff !important;
}
.el-menu.el-menu--horizontal {
  justify-content: space-around;
}
.user_box {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  .box-card {
    width: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
  }
}
.box-card-bottom {
  height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
}
.p1 {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #074695;
}
.p2 {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #6692a3;
}
:deep(.el-card__body) {
  width: 100% !important;
  display: flex;
  align-items: center;
  padding: 10px !important;
}

:deep(.el-avatar) {
  width: 50px;
  height: 50px;
}

.shop_box {
  width: 100%;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 10px;
  position: relative;
  .imge {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .price {
    box-sizing: border-box;
    padding: 5px;
    color: #e4393c;
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    em {
      font-size: 16px;
    }
  }
  .title {
    box-sizing: border-box;
    padding: 0 5px 5px 5px;
    height: 38px;
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 超出几行省略 */
    overflow: hidden;
    color: #666;
    line-height: 18px;
  }
}
.shop_box:hover .send_shop {
  display: flex;
}
.el-col {
  margin-bottom: 15px;
}
.loadingMore {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-main{
  position: relative;
}


.order-header{
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .order-header-title{
        font-size: 14px;
        color: var(--el-text-color-primary);
    }
    .user-order{
        border: 1px solid #ecebeb;
        border-radius: 10px;
        margin: 0 15px;
        background: var(--next-bg-main-color);
        overflow: auto;
        padding: 5px 2px 0;
        .order-cell{
            padding: 10px 0;
            margin: 0 5px 5px;
            background: var(--next-color-white);
            cursor: pointer;
            transition: .5s;
            border-radius: 10px;
            &:hover{
                box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
            }
            &:last-child{
                border: none;
            }
            .top-status{
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ecebeb;
                padding: 0 8px 10px;
                .time{
                    font-size: 13px;
                    color: var(--el-text-color-primary);
                }
                .status{
                    font-size: 13px;
                    &.red{
                        color: var(--el-color-error);
                    }
                }
            }
            .goods-data{
                padding: 10px 8px 0;
                display: flex;
                justify-content: space-between;
                align-items: stretch;
                .order-data{
                    flex: 1;
                    overflow: hidden;
                    margin-left: 10px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    .order-title{
                        font-size: 13px;
                    }
                    .price{
                        font-size: 15px;
                        color: var(--el-color-error);
                        .unit{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
    .send_shop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
// .order-cell:hover .send_shop{
//   display: flex;
// }
</style>
